<template>
  <div :id="`PostSecondMain-${v_key}`" class="flex border-b py-6">
    <template v-if="post&&post.author&&Object.keys(post.author).length!==0">
      <div>
        <img class="rounded-full cursor-pointer max-h-[60px]" width="60"
             @click="isLoggedIn(post)"
             :src="post.author.avatar_thumb.url_list[0]">
      </div>
      <div class="pl-3 w-full px-4">
        <div class="flex items-center justify-between pb-0.5">
          <button>
                    <span class="font-bold hover:underline cursor-pointer">
                      {{ post.author.nickname|allLowerCaseNoCaps }}
                    </span>
            <span class="text-[13px] text-light text-gray-500 pl-1 cursor-pointer">
                        {{ post.author.nickname }}
                    </span>
          </button>

          <button
            class="border text-[15px] px-[21px] py-0.5 border-[#F02C56] text-[#F02C56] hover:bg-[#ffeef2] font-semibold rounded-md">
            Follow
          </button>
        </div>
        <div class="text-[15px] pb-0.5 break-words md:max-w-[400px] max-w-[300px]">{{ post.desc }}</div>
        <div class="text-[14px] pb-0.5 flex items-center font-semibold">
          <Icon name="icon-yinle" size="17"/>
          <div class="px-1">original sound - AWESOME</div>
          <Icon name="icon-aixin" size="20"/>
        </div>

        <div class="mt-2.5 flex"
        >
          <div
            @click="displayPost(post)"
            class="relative min-h-[540px] max-h-[580px] w-[auto] max-w-[440px] min-w-[330px] flex items-center bg-black rounded-xl cursor-pointer"
          >
            <template  v-if="post.video.play_addr.url_list.length!==0&&post.video.play_addr.url_list[0]">
              <video
                ref="video"
                loop
                muted
                class="rounded-xl mx-auto h-full"
                :src="post.video.play_addr.url_list[0]"
              />
            </template>
            <img
              class="absolute right-3 bottom-10"
              width="70"
              src="~/assets/images/logo-white.png"
            >
          </div>
          <div class="relative mr-[75px]">
            <div class="absolute bottom-0 pl-2">
              <div class="pb-4 text-center">
                <button
                  class="rounded-full bg-gray-200 p-2 cursor-pointer"
                >
                  <Icon
                    name="icon-yidianzan"
                    size="25"
                  />
                </button>
                <span class="text-xs text-gray-800 font-semibold">{{ post.statistics.digg_count |million }}</span>
              </div>

              <div class="pb-4 text-center">
                <div class="rounded-full bg-gray-200 p-2 cursor-pointer">
                  <Icon name="icon-pinglun1" size="25"/>
                </div>
                <span class="text-xs text-gray-800 font-semibold">{{ post.statistics.comment_count |million }}</span>
              </div>

              <div class="text-center">
                <div class="rounded-full bg-gray-200 p-2 cursor-pointer">
                  <Icon name="icon-fenxiang" size="25"/>
                </div>
                <span class="text-xs text-gray-800 font-semibold">{{ post.statistics.share_count |million }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    'v_key': {
      type: Number,
      default: 1
    },
    'post': {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      video: null,
    }
  },
  filters: {
    allLowerCaseNoCaps(str) {
      return str.split(' ').join('').toLowerCase()
    },
    million: function (value) {
      let num;
      if (value > 9999) {
        num = (Math.floor(value / 1000) / 10) + '万';
      } else if (value < 9999 && value > -9999) {
        num = value
      } else if (value < -9999) {
        num = -(Math.floor(Math.abs(value) / 1000) / 10) + '万'
      }
      return num;
    }
  },
  mounted() {
    this.video = this.$refs.video
    this.initObserver()
  },
  methods: {
     isLoggedIn(post){
      let sec_uid = post.author.sec_uid
      if(sec_uid){
        this.$router.push(`/user?id=${sec_uid}`)
      }
    },
    initObserver() {
      try {
        let observer = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting) {
            this.video && this.video.play()
          } else {
            this.video && this.video.pause()
          }
        }, {threshold: [0.6]});
        observer.observe(document.getElementById(`PostSecondMain-${this.v_key}`));
      } catch (e) {
        console.log(e)
      }
    },
    displayPost() {
      setTimeout(() => this.$router.push(`/postSecond?id=${this.v_key}`), 200)
    },
  },
  beforeDestroy() {
    try {
      this.video.pause()
      this.video.currentTime = 0
      this.video.src = ''
    } catch (e) {

    }
  },
}
</script>
